<template>
	<view class="xk-radio" @click="clickRadio">
		<view v-if="!isSelect" class="xk-radio-item"></view>
		<view v-else class="xk-radio-item radio-active">
			<view class="dot"></view>
		</view>
		<view class="label">{{label}}</view>
	</view>
</template>

<script>
	export default {
		name:"xk-radio",
		props:{
			label: {
				type: String,
				defalut: ''
			},
			value: String,
			selectValue: String
		},
		watch:{
			selectValue(val, oldVal){
				this.isSelect = this.value == val
			}
		},
		data() {
			return {
				isSelect: this.value == this.selectValue
			};
		},
		methods:{
			clickRadio(){
				this.$emit('change', this.value)
			}
		}
	}
</script>

<style lang="scss">
.xk-radio{
	display: flex;
	align-items: center;
	margin-top: 30rpx;
	.xk-radio-item{
		width: 26rpx;
		height: 26rpx;
		border-radius: 26rpx;
		border: 1px solid #CCCCCC;
	}
	.radio-active{
		display: flex;
		align-items: center;
		justify-content: center;
		.dot{
			border-radius: 14rpx;
			width: 14rpx;
			height: 14rpx;
			background-color: #FF4140;
		}
	}
	.label{
		font-size: 28rpx;
		color: #333333;
		margin-left: 20rpx;
	}
}
</style>
